<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- <script src="./js/vue.js"></script> -->
</head>
<body>
    <!-- 在HTML代码中嵌套vue和直接使用脚手架是一样流程，每个html页面都要new Vue -->
    <div id="app">
        <p>{{msg}}</p>
        <button @click="changeMsg">修改</button>
        <ul>
            
        </ul>
        <!-- <Header @myEvent=""></Header> -->
    </div>
    <script>
        // 数据驱动为准
        const app = new Vue({
            // el:"#app",
            data(){
                return{
                    msg:"南京"
                }
            },
            mounted() {
                // console.log(this.$data.msg = xxx)
                // this.msg
            },
            methods:{
                changeMsg(){
                    this.msg = "武汉"
                }
            }
        }).$mount("#app")

        // dom驱动，解决不了性能问题
        // const array = [1,2,3]
        // let temp = ``
        // array.forEach(item=>{
        //     temp+=`<li>${item.id}</li>`
        // })
        // document.geteElementById("app").innerHTML= temp
    </script>
</body>
</html>